<template>
  <div class="container">
    <CommonHeader bgImage="https://ik.imagekit.io/mpjl8xreo/tools.png">
      <h1 class="title">工具箱</h1>
    </CommonHeader>
    <div class="Assistance">
      <div class="Assistance-list">
        <div
          v-for="item in AssistanceList"
          :key="item.id"
          class="Assistance-item"
          @click="openUrl(item.ai_url)"
        >
          <div class="Assistance-logo">
            <img :src="item.logo_url" alt="" />
          </div>
          <div class="Assistance-info">
            <p class="Assistance-name">
              {{ item.name }}
            </p>
            <p class="Assistance-des">
              {{ item.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import CommonHeader from "@/components/CommonHeader/index.vue";
import { getAllToolsList } from "@/api/tools.js";
const { proxy } = getCurrentInstance();
let AssistanceList = ref([]);
// 点击打开对应ai网址
const openUrl = (url) => {
  window.open(url);
};
const getAssistanceList = async () => {
  let res = await getAllToolsList();
  if (res && res.status === 200) AssistanceList.value = res.data;
};
getAssistanceList();
</script>

<style lang="scss" scoped>
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #ffff;
  font-weight: bold;
}

.Assistance {
  width: 100%;
  margin-top: 15px;
  animation: profile_in 0.8s;

  .Assistance-list {
    width: 100%;
    min-height: 300px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(281px, 1fr));
    gap: 30px;
    padding: 0 20px;
    color: #303133;

    .Assistance-item {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

      .Assistance-logo {
        flex: 1;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;

        img {
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }
      }

      .Assistance-info {
        flex: 2;

        p {
          width: 100%;
          font-size: 14px;
          padding: 0 10px;
        }
      }
    }
  }
}

@keyframes profile_in {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
